<template>
    <el-dialog :model-value="!globalStore.token" :close-on-click-modal="false" :show-close="false"
        :close-on-press-escape="false">
        <el-tabs v-model="activeName" @tab-click="handleTabClick">
            <el-tab-pane label="邮箱登录" name="first">
                <el-form :key="globalStore.token" ref="formRef" :model="form" :rules="rules">
                    <el-form-item prop="email">
                        <el-input autocomplete name="email" v-model="form.email" placeholder="请输入邮箱" clearable />
                    </el-form-item>
                    <el-form-item prop="code">
                        <el-input v-model="form.code" placeholder="请输入邮箱验证码" clearable>
                            <template #append>
                                <el-button :disabled="!isFinished">
                                    <span @click=sendCode>发送</span>
                                    <CountDown @finish="isFinished = true" ref="countRef" :time="Date.now() + 60 * 1000"
                                        format="(ss)s" />
                                </el-button>
                            </template>
                        </el-input>

                    </el-form-item>
                    <el-form-item>
                        <el-button style="margin: 0 auto;" type="primary" @click="onSubmit(formRef)">登录</el-button>
                    </el-form-item>
                </el-form></el-tab-pane>
            <el-tab-pane label="账号登录" name="second">账号登录</el-tab-pane>
        </el-tabs>
    </el-dialog>
</template>
<script setup lang="ts">
import { emailLogin, getUserInfo, sendEmailCode } from '@/api/modules/game'
import { GlobalStore } from '@/store'
import type { FormInstance } from 'element-plus'

const isFinished = ref(true)
const activeName = ref('first')
const globalStore = GlobalStore()
const formRef = ref<FormInstance>()
const countRef = ref()
const form = reactive({
    email: "",
    code: ""
})

const rules = {
    email: [
        { required: true, message: "请输入邮箱地址" },
        { type: "email", message: "邮箱格式错误", trigger: "blur" }
    ],
    code: [
        { required: true, message: "请输入验证码" },
        { min: 6, max: 6, message: "验证码长度为6", trigger: "blur" }
    ]
}


const handleTabClick = () => {
    console.log(activeName.value);

}

const sendCode = async () => {
    try {
        await formRef.value?.validateField(["email"])
        countRef.value?.start();
        await sendEmailCode(form.email)
    } catch (error) {
        console.log(error);
    }
    isFinished.value = false
}

const onSubmit = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate(async (valid) => {
        if (valid) {
            const { data } = await emailLogin(form.email, form.code)
            globalStore.token = data.token;
            
            const { data: data2 } = await getUserInfo()
            globalStore.userInfo = data2;

            console.log('submit!', form)

        } else {
            console.log('error submit!')
        }
    })
}
</script>



<style scoped></style>
